<template>
  <div>
    <rein-switch :checked="checked"></rein-switch>
    <button @click="checked = !checked">切换</button>
    <h3>测试组件</h3>
    <span>当前数值： {{ num }}</span>
    <rein-switch></rein-switch>
    <rein-switch></rein-switch>
    <div class="switch-container active"><div class="action"></div></div>
  </div>
</template>
<script>
import { ref } from "vue";

export default {
  name: "test",
  setup() {
    const num = ref(0);
    const checked = ref(false);
    // setInterval(() => {
    //   num.value ++;
    // }, 1000);

    return { num, checked };
  },
};
</script>
<style scoped lang="scss">
// .switch-container {
//   width: 60px;
//   height: 30px;
//   background-color: rgb(0, 132, 255);
//   border-radius: 15px;
//   cursor: pointer;
//   .action {
//     width: 25px;
//     height: 25px;
//     background-color: white;
//     border-radius: 50%;
//     position: relative;
//     top: 2.5px;
//     left: 2.5px;
//     transition: all 0.35s;
//     transform: translateX(0px);
//   }
//   &.active {
//     background-color: rgb(255, 0, 0);
//     .action {
//       transform: translateX(30px);
//     }
//   }
// }

.switch-container {
  width: 60px;
  height: 30px;
  background-color: rgb(0, 132, 255);
  border-radius: 15px;
  cursor: pointer;
}
.switch-container .action {
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  top: 2.5px;
  left: 2.5px;
  transition: all 0.35s;
  transform: translateX(0px);
}
.switch-container.active {
  background-color: rgb(255, 0, 0);
}
.switch-container.active .action {
  transform: translateX(30px);
}
</style>
